﻿
@{
    ViewBag.Title = "Index";
}

<h2>Shopping Cart Managment</h2>

<form action="/Cart/Update" method="post">
    <table class="table">
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Amount</th>
            <th></th>
        </tr>
        @foreach (var p in AjaxDemo.Models.ShoppingCart.Cart.Items)
    {
            <tr id="@p.Id">
                <td>@p.Id</td>
                <td>@p.Name</td>
                <td>@p.UnitPrice</td>
                <td>
                    <input name="@p.Id" value="@p.Quantity" size="3" />
                </td>
                <td>@(p.UnitPrice*p.Quantity)</td>
                <td>
                    <a href="/Cart/Remove/@p.Id">
                        <img class="remove-from-cart" data-id="@p.Id" src="~/Images/icons/Trash.png" />
                    </a>
                </td>
            </tr>
    }
    </table>
    <br />
    <div>
        <button class="btn btn-default">Update</button>
        <a href="/Cart/Clear" class="btn btn-default">Clear</a>
        <a href="/Product/PaginateForm" class="btn btn-default">Continue</a>
        <a href="/Order/Checkout" class="btn btn-default">Checkout</a>
    </div>
</form>

@section scripts{
    <script>
        $(function () {
            $("img.remove-from-cart").click(function () {
                dataId = $(this).attr("data-id");
                $.ajax({
                    url: "/Cart/Remove",
                    data: {id: dataId},
                    success: function (response) {
                        $("#cart-count").html(response.Count);
                        $("#cart-amount").html(response.Amount);

                        $("tr#" + dataId).hide(1000, function () {
                            $(this).html("");
                        });
                    }
                });
                return false;
            });
        });
    </script>
}